<template>
  <el-dialog :visible.sync="showDialog"
             :fullscreen="fullscreen"
             :show-close="false"
             :width="width"
             :modal-append-to-body="false"
             :close-on-click-modal="false"
             :before-close="escClose"
             v-loading.fullscreen.lock="loading">
    <div slot="title"
         class="zero-dialog__title">
      <span>{{title}}</span>
      <span style="float:right;">
        <el-row :gutter="15">
          <el-col :span="12"
                  v-if="fullscreen !==null">
            <i :class="[fullscreen?'el-icon-copy-document':'el-icon-full-screen','zero-dialog__title_right'] "
               @click="fullscreenFun" />
          </el-col>
          <el-col :span="12">
            <i class="el-icon-close zero-dialog__title_right"
               @click="showDialogFun" />
          </el-col>
        </el-row>
      </span>
    </div>
    <slot name="body" />
    <div slot="footer"
         class="dialog-footer">
      <el-button v-if="btnExist"
                 type="primary"
                 @click="submitFun"
                 size="small"> 确 定 </el-button>
      <el-button v-if="btnExist"
                 @click="showDialogFun"
                 size="small"> 取 消 </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'TestModel',
  props: {
    showDialog: Boolean,
    fullscreen: {
      type: Boolean,
      default: null
    },
    title: String,
    btnExist: Boolean,
    loading: Boolean,
    width: String,
    submit: {
      type: Function,
      default: null
    }
  },
  methods: {
    fullscreenFun () {
      // 子组件设置父组件值
      this.$emit('update:fullscreen', !this.fullscreen)
    },
    showDialogFun () {
      this.$emit('update:showDialog', !this.showDialog)
    },
    escClose () {
      this.$emit('update:showDialog', !this.showDialog)
    },
    submitFun () {
      this.submit()
    }
  }
}
</script>
<style>
.el-dialog__header {
  padding: 0px !important;
}
.zero-dialog__title {
  font-size: 1.1em;
  padding: 9px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f8f8f8;
}
.zero-dialog__title_right {
  cursor: pointer;
}
.zero-dialog__title_right:hover {
  color: #409eff;
}
</style>
